<template>
  <div class="clue-enter">
    <ContentField>
      <template v-slot:header> 线索录入 </template>
      <template v-slot:body>
        <div style="height: 90vh; overflow-y: scroll">
          <el-form
            ref="form"
            :model="newClue"
            label-width="80px"
            style="height: 150vh"
          >
            <el-alert
              title="必填项"
              type="error"
              :closable="false"
              style="width: 300px; margin-left: 80px"
            >
            </el-alert>
            <br />
            <el-form-item label="所在省市">
              <el-select
                v-model="newClue.pid"
                placeholder="请选择对应的省"
                @change="getCitiesByPid"
              >
                <el-option
                  v-for="province in provinces"
                  :label="province.name"
                  :value="province.id"
                  :key="province.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="newClue.cid"
                placeholder="请选择对应的城市"
                style="padding-left: 20px"
                @change="selectSchoolsByCid"
              >
                <el-option
                  v-for="city in cities"
                  :label="city.name"
                  :value="city.id"
                  :key="city.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在学校">
              <el-select v-model="newClue.sid" placeholder="请选择对应的学校">
                <el-option
                  v-for="school in schools"
                  :label="school.name"
                  :value="school.id"
                  :key="school.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学生姓名" style="width: 300px">
              <el-input v-model="newClue.studentName"></el-input>
            </el-form-item>
            <el-form-item label="推荐人" style="width: 300px">
              <el-input value="本人" :disabled="true"></el-input>
            </el-form-item>
            <el-alert
              title="五选一"
              type="success"
              :closable="false"
              style="width: 300px; margin-left: 80px"
            >
            </el-alert>
            <br />
            <el-form-item label="QQ" style="width: 400px">
              <el-input v-model="newClue.qq"></el-input>
            </el-form-item>
            <el-form-item label="手机" style="width: 400px">
              <el-input v-model="newClue.phoneNum"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" style="width: 400px">
              <el-input v-model="newClue.email"></el-input>
            </el-form-item>
            <el-form-item label="座机" style="width: 400px">
              <el-input v-model="newClue.landline"></el-input>
            </el-form-item>
            <el-form-item label="准考证" style="width: 400px">
              <el-input v-model="newClue.admissionTicket"></el-input>
            </el-form-item>
            <el-alert
              title="选填项"
              type="warning"
              :closable="false"
              style="width: 300px; margin-left: 80px"
            >
            </el-alert>
            <br />
            <el-form-item label="第一志愿">
              <el-autocomplete
                class="inline-input"
                v-model="newClue.firstChoice"
                placeholder="请选择对应的大学"
                disabled
              ></el-autocomplete>
              <el-autocomplete
                class="inline-input"
                v-model="newClue.firstMajor"
                placeholder="请选择对应的专业"
                style="padding-left: 20px"
                disabled
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="第二志愿">
              <el-autocomplete
                class="inline-input"
                v-model="newClue.secondChoice"
                placeholder="请选择对应的大学"
                disabled
              ></el-autocomplete>
              <el-autocomplete
                class="inline-input"
                v-model="newClue.secondMajor"
                placeholder="请选择对应的专业"
                style="padding-left: 20px"
                disabled
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="考生类型">
              <el-select
                v-model="newClue.candidateType"
                placeholder="请选择考生类型"
                disabled
              >
                <el-option label="统招" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证" style="width: 400px">
              <el-input v-model="newClue.idNum"></el-input>
            </el-form-item>
            <el-form-item label="家庭住址" style="width: 400px">
              <el-input v-model="newClue.address"></el-input>
            </el-form-item>
            <el-form-item label="备注" style="width: 800px">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="newClue.remark"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="open">点击提交信息</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </ContentField>
  </div>
</template>

<script>
import axios from "axios";
import ContentField from "../../components/ContentField.vue";

export default {
  name: "ClueEnterView",
  components: {
    ContentField,
  },
  created() {
    this.getProvinces();
  },
  mounted() {},
  methods: {
    // 获取所有城市信息，没有被用到过
    getAllCities() {
      this.provinces = [];
      this.cities = [];
      axios
        .post(
          "/city/get/all",
          {},
          {
            headers: {
              Authorization: "Bearer " + data.token,
            },
          }
        )
        .then((resp) => console.log(resp))
        .catch((resp) => console.log(resp));
    },
    // 点击编辑图标后触发的事件
    open() {
      let outer = this;
      this.$confirm(
        "请检查信息是否无误,信息成功提交后会被清空, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
        // 点击消息框确认
        .then(() => {
          outer.addClue();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    // 选择城市后，自动调用，获取城市对应的学校
    selectSchoolsByCid() {
      let outer = this;
      this.newClue.sid = "";
      this.$store.dispatch("selectSchoolsByCid", {
        cid: this.newClue.cid,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          if (resp.data.code == 200) {
            outer.schools = resp.data.data;
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 获取所有省份
    getProvinces() {
      this.newClue.cid = "";
      this.newClue.sid = "";
      let outer = this;
      this.$store.dispatch("getProvinces", {
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.provinces = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 选择省份后，自动调用，获取对应的城市
    getCitiesByPid() {
      let outer = this;
      this.newClue.cid = "";
      this.newClue.sid = "";
      this.$store.dispatch("getCitiesByPid", {
        pid: this.newClue.pid,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.cities = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 点击确认提交后，调用
    addClue() {
      this.newClue.uid = this.$store.state.user.id;
      let outer = this;
      this.$store.dispatch("addClue", {
        clue: this.newClue,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          if (resp.data.code == 200) {
            outer.$message({
              type: "success",
              message: "成功提交!",
            });
            outer.newClue = {
              firstChoice: "湖北工业大学",
              firstMajor: "计算机科学与技术",
              secondChoice: "湖北工业大学",
              secondMajor: "计算机科学与技术",
              candidateType: "1",
            };
          } else {
            outer.$message.error("提交信息失败：" + resp.data.message);
          }
        },
        error(resp) {
          outer.$message.error("提交信息失败");
        },
      });
    },
  },
  data() {
    return {
      // 所有省份
      provinces: [],
      // 城市列表
      cities: [],
      // 学校列表
      schools: [],
      // 表单中当前的新线索的信息
      newClue: {
        pid: "",
        cid: "",
        sid: "",
        studentName: "",
        reference: "",
        qq: "",
        phoneNum: "",
        email: "",
        landline: "",
        admissionTicket: "",
        idNum: "",
        firstChoice: "湖北工业大学",
        firstMajor: "计算机科学与技术",
        secondChoice: "湖北工业大学",
        secondMajor: "计算机科学与技术",
        candidateType: "1",
        address: "",
        remark: "",
      },
    };
  },
};
</script>

<style scoped></style>
